<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>相册 - 知识分子足球队</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="colorbox/colorbox.css"/>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            font-family: "微软雅黑", Helvetica, Verdana, Arial, sans-serif;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .pictures-area a img {
            max-width: 180px;
            max-height: 140px;
        }
    </style>
</head>
<body>

<div class="container">
<div class="row">
    <div class="col-md-12">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#navbar-collapse-01">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="#"><strong>知识分子</strong></a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse-01">
                <ul class="nav navbar-nav">
                    <li><a href="template2.html">首页</a></li>
                    <li><a href="template2_match.html">比赛</a></li>
                    <li><a href="template2_data.html">数据</a></li>
                    <li class="active"><a href="#">相册</a></li>
                </ul>
                <!--right navbar-->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="glyphicon glyphicon-user"></i> 登录</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
        <!-- /navbar -->
    </div>
</div>

<div class="row">
<div class="col-md-3">
    <div class="list-group">
      <a href="#" class="list-group-item active">
        <span class="badge">14</span>
        2014-02-02 球队比赛照片
      </a>
      <a href="#" class="list-group-item">
        <span class="badge">4</span>
        2014-01-13 球队年会聚餐
      </a>
      <a href="#" class="list-group-item">
        <span class="badge">13</span>
        2014-01-01 比赛照片
      </a>
      <a href="#" class="list-group-item">
        <span class="badge">12</span>
        2013-12-23 五人制比赛照片
      </a>
      <a href="#" class="list-group-item">
        <span class="badge">3</span>
        2013-11-03 新球衣照片
      </a>
    </div>
</div>
<div class="col-md-9">
    <div class="panel panel-default">
        <div class="panel-body pictures-area">
            <div class="row">
                <div class="col-md-3">
                    <a href="images/1.jpg" title="1.jpg" class="pictureGroup">
                        <img src="images/1.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/6.jpg" title="6.jpg" class="pictureGroup">
                        <img src="images/6.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/3.jpg" title="3.jpg" class="pictureGroup">
                        <img src="images/3.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/4.jpg" title="4.jpg" class="pictureGroup">
                        <img src="images/4.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>
            </div>    
            <div class="row" style="margin-top:3px;">
                <div class="col-md-3">
                    <a href="images/1.jpg" title="1.jpg" class="pictureGroup">
                        <img src="images/1.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/2.jpg" title="2.jpg" class="pictureGroup">
                        <img src="images/2.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/3.jpg" title="3.jpg" class="pictureGroup">
                        <img src="images/3.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/4.jpg" title="4.jpg" class="pictureGroup">
                        <img src="images/4.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>
            </div>            
            <div class="row" style="margin-top:3px;">
                <div class="col-md-3">
                    <a href="images/1.jpg" title="1.jpg" class="pictureGroup">
                        <img src="images/1.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/2.jpg" title="2.jpg" class="pictureGroup">
                        <img src="images/2.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/3.jpg" title="3.jpg" class="pictureGroup">
                        <img src="images/3.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/4.jpg" title="4.jpg" class="pictureGroup">
                        <img src="images/4.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>
            </div>            
            <div class="row" style="margin-top:3px;">
                <div class="col-md-3">
                    <a href="images/3.jpg" title="3.jpg" class="pictureGroup">
                        <img src="images/3.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    <a href="images/4.jpg" title="4.jpg" class="pictureGroup">
                        <img src="images/4.jpg" alt="..." class="img-thumbnail"/>
                    </a>
                </div>        
                <div class="col-md-3">
                    &nbsp;
                </div>        
                <div class="col-md-3">
                    &nbsp;
                </div>
            </div>
        </div>
        <div class="panel-footer text-info">
            <i class="glyphicon glyphicon-pushpin"></i> 相册的描述信息在这儿
        </div>
    </div>
</div>
</div>


<div class="row">
    <div class="col-md-12">
        <hr/>
        <p class="text-center text-muted">
            &copy; 2014 知识分子足球队 All rights reserved.
        </p>
    </div>
</div>
</div>
<!-- /.container -->


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script src="colorbox/jquery.colorbox-zh-CN.js"></script>
<script>
    $(function(){
         //colorbox init
        $(".pictures-area a").colorbox({
            rel:'pictureGroup'
        });
    });
</script>
</body>
</html>